"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Textarea } from "@/components/ui/textarea"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Clock, Eye, MessageCircle, Share2, Bookmark, ThumbsUp, Send } from "lucide-react"
import { useState } from "react"
import ReactMarkdown from "react-markdown"

interface NewsDetailModalProps {
  news: any
  onClose: () => void
  user: any
}

export function NewsDetailModal({ news, onClose, user }: NewsDetailModalProps) {
  const [isBookmarked, setIsBookmarked] = useState(false)
  const [isLiked, setIsLiked] = useState(false)
  const [likeCount, setLikeCount] = useState(156)
  const [comment, setComment] = useState("")
  const [comments, setComments] = useState([
    {
      id: 1,
      user: "张总",
      avatar: "/placeholder.svg?height=32&width=32",
      content: "这个分析很到位，我们公司正在考虑相关投资",
      time: "2小时前",
      likes: 12,
    },
    {
      id: 2,
      user: "李经理",
      avatar: "/placeholder.svg?height=32&width=32",
      content: "政策确实是个机会，但要注意风险控制",
      time: "3小时前",
      likes: 8,
    },
    {
      id: 3,
      user: "王董",
      avatar: "/placeholder.svg?height=32&width=32",
      content: "我们已经在布局相关产业链了，看好后续发展",
      time: "5小时前",
      likes: 15,
    },
  ])

  const handleBookmark = () => {
    setIsBookmarked(!isBookmarked)
  }

  const handleLike = () => {
    setIsLiked(!isLiked)
    setLikeCount(isLiked ? likeCount - 1 : likeCount + 1)
  }

  const handleShare = () => {
    navigator.clipboard.writeText(`${news.title} - 商界资讯`)
  }

  const handleSubmitComment = () => {
    if (comment.trim() && user) {
      const newComment = {
        id: comments.length + 1,
        user: user.name,
        avatar: user.avatar || "/placeholder.svg?height=32&width=32",
        content: comment,
        time: "刚刚",
        likes: 0,
      }
      setComments([newComment, ...comments])
      setComment("")
    }
  }

  return (
    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <div className="flex items-start justify-between">
            <div className="flex-1">
              <DialogTitle className="text-xl font-semibold text-slate-900 mb-3 leading-relaxed">
                {news.title}
              </DialogTitle>
              <div className="flex items-center space-x-4 mb-4">
                {news.priority && (
                  <Badge
                    variant={
                      news.priority === "high" ? "destructive" : news.priority === "medium" ? "default" : "secondary"
                    }
                  >
                    {news.priority === "high" ? "重要" : news.priority === "medium" ? "关注" : "一般"}
                  </Badge>
                )}
                <div className="flex items-center space-x-1 text-sm text-slate-600">
                  <Clock className="w-4 h-4" />
                  <span>{news.readTime}</span>
                </div>
                <div className="flex items-center space-x-1 text-sm text-slate-600">
                  <Eye className="w-4 h-4" />
                  <span>{news.views} 阅读</span>
                </div>
                <span className="text-sm text-slate-500">{news.time}</span>
              </div>
              <div className="flex items-center space-x-4 text-sm text-slate-600 mb-4">
                <span>来源：{news.source}</span>
                <span>作者：{news.author}</span>
              </div>
            </div>
            <div className="flex items-center space-x-2">
              <Button variant="ghost" size="sm" onClick={handleLike}>
                <ThumbsUp className={`w-4 h-4 ${isLiked ? "fill-current text-blue-600" : ""}`} />
                <span className="ml-1">{likeCount}</span>
              </Button>
              <Button variant="ghost" size="sm" onClick={handleBookmark}>
                <Bookmark className={`w-4 h-4 ${isBookmarked ? "fill-current text-yellow-600" : ""}`} />
              </Button>
              <Button variant="ghost" size="sm" onClick={handleShare}>
                <Share2 className="w-4 h-4" />
              </Button>
            </div>
          </div>
        </DialogHeader>

        <Separator className="my-4" />

        {/* 文章内容 - 使用 Markdown 渲染 */}
        <div className="prose prose-slate max-w-none">
          <ReactMarkdown className="text-slate-700 leading-relaxed">{news.content}</ReactMarkdown>
        </div>

        {news.tags && (
          <div className="mt-6">
            <Separator className="mb-4" />
            <div className="flex items-center space-x-2">
              <span className="text-sm font-medium text-slate-600">相关标签：</span>
              <div className="flex flex-wrap gap-2">
                {news.tags.map((tag, index) => (
                  <Badge key={index} variant="outline" className="text-xs">
                    {tag}
                  </Badge>
                ))}
              </div>
            </div>
          </div>
        )}

        <Separator className="my-6" />

        {/* 评论区 */}
        <div className="space-y-4">
          <div className="flex items-center space-x-2">
            <MessageCircle className="w-5 h-5 text-slate-600" />
            <h4 className="font-medium text-slate-900">评论 ({comments.length})</h4>
          </div>

          {/* 发表评论 */}
          {user ? (
            <div className="flex space-x-3">
              <Avatar className="w-8 h-8">
                <AvatarImage src={user.avatar || "/placeholder.svg"} />
                <AvatarFallback>{user.name?.[0]}</AvatarFallback>
              </Avatar>
              <div className="flex-1 space-y-2">
                <Textarea
                  placeholder="分享您的观点..."
                  value={comment}
                  onChange={(e) => setComment(e.target.value)}
                  className="min-h-[80px]"
                />
                <div className="flex justify-end">
                  <Button size="sm" onClick={handleSubmitComment} disabled={!comment.trim()}>
                    <Send className="w-4 h-4 mr-2" />
                    发表评论
                  </Button>
                </div>
              </div>
            </div>
          ) : (
            <div className="text-center py-4 text-slate-500">
              <p>请登录后参与评论</p>
            </div>
          )}

          <Separator />

          {/* 评论列表 */}
          <div className="space-y-4">
            {comments.map((comment) => (
              <div key={comment.id} className="flex space-x-3">
                <Avatar className="w-8 h-8">
                  <AvatarImage src={comment.avatar || "/placeholder.svg"} />
                  <AvatarFallback>{comment.user[0]}</AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <div className="flex items-center space-x-2 mb-1">
                    <span className="font-medium text-slate-900">{comment.user}</span>
                    <span className="text-xs text-slate-500">{comment.time}</span>
                  </div>
                  <p className="text-sm text-slate-700 mb-2">{comment.content}</p>
                  <div className="flex items-center space-x-2">
                    <Button variant="ghost" size="sm" className="h-6 px-2 text-xs">
                      <ThumbsUp className="w-3 h-3 mr-1" />
                      {comment.likes}
                    </Button>
                    <Button variant="ghost" size="sm" className="h-6 px-2 text-xs">
                      回复
                    </Button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-6 flex items-center justify-end">
          <Button onClick={onClose}>关闭</Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
